<template>
	<div class="pylistIntro" v-if="dataDe" >
			<div class="playIntro">
				<div class="introTags">
					<span>标签：</span>
					<em class="tag" v-for="item in dataDe.tags" >{{item}}</em>
				</div>
				<div class="intro">
					<div class="f-brk " :class="{fThide3:!isline}" > <!--f-thide3-->
						<span>简介：</span><span class="introDe" v-for="(item,index) in splitIntro(dataDe.description)">{{item}}<br /></span>
						
					</div>
					
					<span class="arrow iconfont icon-arrow" @click="changeline" v-show="!isline" ></span>
					<span class="arrow iconfont icon-arrow-up" @click="changeline" v-show="isline" ></span>
				</div>
			</div>
	</div>
</template>

<script>
	

export default {
	name:'pylistIntro',
	data(){
		return {
			introArr:'',
			isline:false
		}
	},
	props:{
		dataDe:{
			type:[Object,String]
			
			}
	},
	activated(){
		this.isline=false;
	},
	methods:{
		splitIntro(str){
//			this.introArr = str.split('\n');
//			return this.introArr
			return str.split('\n');
		},
		changeline(){
			if(this.isline){
				this.isline=false;
			}else{
				this.isline=true;
			}
		}
	}
}
</script>

<style lang="scss">
@import '../scss/common';
@import '../scss/reset';

.arrow{
	position: absolute;
    bottom: r(6px);
    right: 0;
    z-index: 3;
    width: r(30px);
    height: r(30px);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: r(24px) auto;
}
.introDe{
	font-size: r(30px);
}
.intro{
	position: relative;
    padding-bottom: r(36px);
    line-height: r(38px);
    color: #666;
}
.f-brk{
	word-wrap: break-word;
    word-break: break-all;
    white-space: normal;
    span{
    	font-size: r(30px);
    }
}
.fThide3{
	-webkit-line-clamp: 3;
	overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    /*-webkit-line-clamp: 2;*/
    -webkit-box-orient: vertical;
}
.playIntro{
	text-align: left;
	position: relative;
    margin: 0 r(20px) 0 r(30px);
    padding-top: r(20px);
    line-height: r(38px);
    color: #666;
}
.introTags{
	font-size: 0;
	
	margin-bottom: r(20px);
    line-height: r(40px);
    margin-right: r(-20px);
    span{
    	font-size: r(30px);
    }
}
.tag{
	display: inline-block;
    margin-right: r(20px);
    padding: r(2px) r(16px);
    font-size: r(24px);
    position: relative;
    &::after{
    	position: absolute;
	    z-index: 2;
	    content: "";
	    top: 0;
	    left: 0;
	    pointer-events: none;
	    box-sizing: border-box;
	    width: 100%;
	    height: 100%;
	    -webkit-transform-origin: top left;
	    transform-origin: top left;
	    border: r(2px) solid rgba(0,0,0,.1);
	    border-radius: r(24px);
    }
}

</style>